$(function () {
    $.post("/music/sort/findAllStyle",{},function (data) {
        console.log("所有风格："+data)
        $style = $("#styleBox");
        $style.empty();
        $style.html(" <label class=\"lyear-radio radio-inline radio-primary\" onclick='find()'>\n" +
            "           <input type=\"radio\" name=\"styleid\" value=\"0\" checked='checked' onclick='find()'><span onclick='find()'>全部风格</span>\n" +
            "         </label>")
        var list = "";
        for (var i = 0; i < data.length; i++) {
            var label = "<label class=\"lyear-radio radio-inline radio-primary\" onclick='find()'>\n" +
                "           <input type=\"radio\" name=\"styleid\" value='"+data[i].musicstyleid+"' onclick='find()'>" +
                "           <span onclick='find()'>"+data[i].musicstylename+"</span>\n" +
                "         </label>"
            list +=label;
        }
        $style.append(list);
    });
    $.post("/music/sort/findAllLanguage",{},function (data) {
        console.log("所有语种："+data)
        $language = $("#languageBox");
        $language.empty();
        $language.html("<label class=\"lyear-radio radio-inline radio-primary\" onclick='find()'>\n" +
            "               <input type=\"radio\" name=\"languageid\" value=\"0\" checked='checked' onclick='find()'>" +
            "               <span onclick='find()'>全部语种</span>\n" +
            "           </label>")
        var list = "";
        for (var i = 0; i < data.length; i++) {
            var label = "<label class=\"lyear-radio radio-inline radio-primary\" onclick='find()'>\n" +
                "           <input type=\"radio\" name=\"languageid\" value='"+data[i].musiclanguageid+"' onclick='find()'>" +
                "           <span onclick='find()'>"+data[i].musiclanguagename+"</span>\n" +
                "         </label>"
            list +=label;
        }
        $language.append(list);
    });
    findMusicsBySort();
});

function findMusicsBySort(styleid,languageid,currentPage) {
    var styleid = $('#styleBox input[name="styleid"]:checked ').val();
    console.log("选中的风格1："+styleid)
    var languageid = $('#languageBox input[name="languageid"]:checked ').val();
    console.log("选中的语种1："+languageid)
    $.post("/music/music/findMusicsBySort",{styleid:styleid,languageid:languageid,currentPage:currentPage},function (data) {
        console.log(data);
        $res = $("#result");
        $res.empty();
        if (data.list != null) {
            //获取tbody
            $res.html("  <thead>\n" +
                "                    <tr>\n" +
                "                        <th></th>\n" +
                "                        <th>歌曲</th>\n" +
                "                        <th>歌手</th>\n" +
                "                        <th>操作</th>\n" +
                "                    </tr>\n" +
                "                    </thead>")
            //拼接
            var trlist = '';
            // var t = document.createElement("tbody");
            for (var i = 0; i < data.list.length; i++) {
                var tr = "<tr>\n" +
                    "                        <th scope=\"row\">"+ ((data.currentPage - 1) * data.pageSize + i + 1) +"</th>\n" +
                    "<td>" + "<a href='musicInfo.html?mid="+data.list[i].mid+"'>"+data.list[i].musicname+"</a>" + "</td>" +

                    // "                        <td>" + data.list[i].musicname + "</td>\n" +
                    "                        <td>" + data.list[i].singer.singername + "</td>\n" +
                    "                        <td>\n" +
                    "                            <div class=\"btn-group\">\n" +
                    "                                <a class=\"btn btn-xs btn-default\" onclick='insertMusic(" + data.list[i].mid + ")' href=\"#\" title=\"播放\" data-toggle=\"tooltip\"\n" +
                    "                                   data-original-title=\"播放\">\n" +
                    "                                    <i class=\"mdi mdi-arrow-right-drop-circle-outline\"></i>\n" +
                    "                                </a>\n" +
                    "                               <div class=\"btn-group\">\n" +
                    "                                   <a data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" class=\"btn btn-xs btn-default\" id=\"addBtn\" title=\"添加到歌单\" data-toggle=\"tooltip\"\n" +
                    "                                       data-original-title=\"添加到歌单\" onclick='addToList(" + data.list[i].mid + ")'>\n" +
                    "                                       <i class=\"mdi mdi-plus\"></i>\n" +
                    "                                    </a>\n" +
                    "                                   <ul class=\"dropdown-menu\" id='userMusicList'>\n" +
                    "                                   </ul>\n" +
                    "                               </div>" +
                    "                            </div>\n" +
                    "                        </td>\n" +
                    "                    </tr>"
                trlist += tr;
            }
            //2.3 将liList添加到ul中
            $res.append(trlist);
            //4.处理页面 前5后4
            //4.1 开始页数 = 当前页数-5
            var start = data.currentPage-5;
            //4.2结束页数=当前页数+4
            var end = data.currentPage+4;
            //4.3判断前面不足5个的情况
            if (start<1){
                start=1;
                end=10;
            }
            //4.4判断后面不足4的情况
            if (end>data.totalPage){
                end = data.totalPage;
                start = end-9;
            }
            //4.5总页数不足10页
            if (data.totalPage<10){
                start = 1;
                end = data.totalPage;
            }
            //4.6拼接 ul -li
            $pageUl = $("#pageUl");
            //首页  cid = 3
            var pageList = '<li><a href="javaScript:findMusicsBySort('+styleid+','+languageid+')">首页</a></li>';
            //上一页
            var prePage = data.currentPage - 1;
            if(prePage < 1){
                prePage = 1;
            }
            pageList += '<li >' +
                '<a href="javaScript:findMusicsBySort('+styleid+','+languageid+','+prePage+')">上一页</a></li>';
            //拼接 页码 从start开始 end 结束
            for(var i = start ; i <= end; i++){
                if(i === data.currentPage){
                    pageList += '<li onclick="findMusicsBySort('+styleid+','+languageid+','+i+')" class="active"><a href="javaScript:">'+i+'</a></li>';
                }else {
                    pageList += '<li onclick="findMusicsBySort('+styleid+','+languageid+','+i+')" ><a href="javaScript:">'+i+'</a></li>';
                }
            }
            //下一页
            var nextPage = data.currentPage + 1;
            if (nextPage > data.totalPage){
                nextPage = data.totalPage;
            }
            pageList += '<li onclick="findMusicsBySort('+styleid+','+languageid+','+nextPage+')" ><a href="javascript:;">下一页</a></li>';
            //末页
            pageList += '<li onclick="findMusicsBySort('+styleid+','+languageid+','+data.totalPage+')" ><a href="javascript:;">末页</a></li>';
            //4.7 将pageList添加到ul中
            $pageUl.html(pageList);
        }
    })
}
function find() {
    findMusicsBySort();
}